<template>
	<view>
		<u-tabs :list="typeList" @click="changeType" :current="currentIndex" :scrollable="false"></u-tabs>
		<view v-if="currentIndex==0 || currentIndex==2">
		<view class="wq-table">
			<view class="thead">基本信息</view>
			<view class="tbody">
				<view class="row">
					<view class="th">客户名称</view>
					<view class="td">{{info.customName}}</view>
				</view>
				<view class="row">
					<view class="th">车间名称</view>
					<view class="td">{{info.chejian}}</view>
				</view>
				<view class="row">
					<view class="th">送修姓名</view>
					<view class="td">{{info.personName}}</view>
				</view>
				<view class="row">
					<view class="th">联系方式</view>
					<view class="td" @tap="call(info.phone)">{{info.phone}}</view>
				</view>
				
			</view>
		</view>
		
		<view class="wq-table">
			<view class="thead">产品信息</view>
			<view class="tbody">
				<view class="row">
					<view class="th">产品编码</view>
					<view class="td">{{info.skuNo}}</view>
				</view>
				<view class="row">
					<view class="th">kks编码</view>
					<view class="td">{{info.kksno}}</view>
				</view>
				<view class="row">
					<view class="th">产品名称</view>
					<view class="td">{{info.name}}</view>
				</view>
				<view class="row">
					<view class="th">产品数量</view>
					<view class="td">{{info.num}}</view>
				</view>
				<view class="row">
					<view class="th">产品型号</view>
					<view class="td">{{info.cpxh}}</view>
				</view>
				<!-- <view class="row">
					<view class="th">产品规格</view>
					<view class="td">{{info.cpgg}}</view>
				</view> -->
				<view class="row">
					<view class="th">生产厂家</view>
					<view class="td">{{info.sccj}}</view>
				</view>
				<view class="row">
					<view class="th">维修次数</view>
					<view class="td">{{info.wxcs}}</view>
				</view>
				<view class="row">
					<view class="th">产品口径</view>
					<view class="td">{{info.cpkj}}</view>
				</view>
				<view class="row">
					<view class="th">阀体材质</view>
					<view class="td">{{info.ftcz}}</view>
				</view>
				<view class="row">
					<view class="th">阀芯材质</view>
					<view class="td">{{info.fxcz}}</view>
				</view>
				<view class="row">
					<view class="th">阀杆材质</view>
					<view class="td">{{info.fgcz}}</view>
				</view>
			</view>
		</view>
		<view class="wq-table">
			<view class="thead">维修描述</view>
			<view class="tbody">
				<view class="row">
					<view class="th">维修描述</view>
					<view class="td">{{info.describ}}</view>
				</view>
				<view class="row">
					<view class="th">图片描述</view>
					<view class="td flex-container"><image class="mImg" mode="aspectFill" :src="cdnUrl+item" @tap="previewImg(info.picArr,index)" v-for="(item,index) in info.picArr"></image></view>
				</view>
				<view class="row">
					<view class="th">视频描述</view>
					<view class="td" flex-container><video class="mVideo" :src="cdnUrl+item" v-for="(item,index) in info.videoArr"></video></view>
				</view>
				
				
				
			</view>
		</view>
		
		</view>
		
		<view class="steps" v-if="currentIndex==1 || currentIndex==2">
			<view class="stepsItem">
				<view class="title">进厂</view>
				<view class="time">{{info.createdAt}}</view>
			</view>
			<view class="stepsItem" v-if="info.status>0">
				<view class="title">拆修</view>
				<view class="time">{{info.chaiAt}}</view>
				<view class="itemList">
					<view class="ilItem" v-for="(item,index) in info.chaiArr" :key="index">
						<view class="illItem">
						<view class="label">维修项目：</view>
						<view class="listTitle">
						{{item.title}}
						</view>
						</view>
						<view class="illItem" v-if="item.picLength>0">
						<view class="label">图片描述：</view>
						<view class="picList">
							
							<image mode="aspectFill" @tap="previewImg(item.picList,idx)"  :src="cdnUrl+it" v-for="(it,idx) in item.picList" :key="idx"></image>
						</view>
						</view>
						<view class="illItem" v-if="item.videoLength>0">
						<view class="label">视频描述：</view>
						<view class="videoList">
							
							<video mode="aspectFill"  :src="cdnUrl+it" v-for="(it,idx) in item.videoList" :key="idx"></video>
						</view>
						</view>
						<view class="illItem" v-if="item.price!==''">
						<view class="label">维修价格：</view>
						<view class="price">
							￥{{item.price}}
						</view>
						</view>
						<view class="illItem">
						<view class="label">拆修描述：</view>
						<view class="listDescription">{{item.text}}</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="stepsItem" v-if="info.status>1">
				<view class="title">客户已确认维修</view>
				<view class="time">{{info.chaiTrueAt}}</view>
				<view class="illlItem">
				<view class="label">客户签字：</view>
				<view class="listTitle">
				<image :src="cdnUrl+info.trueXiu" mode="aspectFill" @tap="previewImg([info.trueXiu],0)"></image>
				</view>
				</view>
			</view>
			<view class="stepsItem" v-if="info.status>2">
				<view class="title">维修</view>
				<view class="time">{{info.xiuAt}}</view>
				<view class="itemList">
					<view class="ilItem" v-for="(item,index) in info.xiuArr" :key="index">
						<view class="illItem">
						<view class="label">维修项目：</view>
						<view class="listTitle">
						{{item.title}}
						</view>
						</view>
						<view class="illItem" v-if="item.picLength>0">
						<view class="label">图片描述：</view>
						<view class="picList">
							
							<image mode="aspectFill" @tap="previewImg(item.picList,idx)"  :src="cdnUrl+it" v-for="(it,idx) in item.picList" :key="idx"></image>
						</view>
						</view>
						<view class="illItem" v-if="item.videoLength>0">
						<view class="label">视频描述：</view>
						<view class="videoList">
							
							<video  :src="cdnUrl+it" v-for="(it,idx) in item.videoList" :key="idx"></video>
						</view>
						</view>
						
						<view class="illItem">
						<view class="label">维修描述：</view>
						<view class="listDescription">{{item.text}}</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="stepsItem" v-if="info.status>=4">
					<view class="title">试压</view>
					<view class="time">{{info.shiyaAt}}</view>
					<view class="illlItem">
						<view class="label">试压工姓名：</view>
						<view class="listTitle">
							{{info.shiyaArr.name}}
						</view>
					</view>
					<view class="illlItem">
						<view class="label">试压压力：</view>
						<view class="listTitle">
							{{info.shiyaArr.yali}}
						</view>
					</view>
					<view class="illlItem">
						<view class="label">试压时长(秒)：</view>
						<view class="listTitle">
							{{info.shiyaArr.shiyaLong}}
						</view>
					</view>
					<view class="illlItem">
						<view class="label">试压照片：</view>
						<view class="listTitle">
							<view class="picList">
								<image mode="aspectFill" :src="cdnUrl+it" @tap="previewImg([info.shiyaArr.shiyaPic],0)"
								v-for="(it,idx) in info.shiyaArr.shiyaPic" :key="idx">
								</image>
							</view>
							
						</view>
					</view>
					<view class="illlItem">
						<view class="label">试压视频：</view>
						<view class="listTitle">
							<view class="picList">
							<video  mode="aspectFill" :src="cdnUrl+it" v-for="(it,idx) in info.shiyaArr.shiyaVideo"
								:key="idx"></video>
							</view>
							
						</view>
					</view>
					
					
				
				
			</view>
			<!-- <view class="stepsItem" v-if="info.status>4">
				<view class="title">喷漆</view>
				<view class="time">{{info.shiyaAt}}</view>
				
				<view class="illlItem">
				<view class="label">喷漆照片：</view>
				<view class="listTitle">
				<image mode="aspectFill" :src="cdnUrl+info.penqiArr.penqiPic" @tap="previewImg([info.penqiArr.penqiPic],0)"></image>
				</view>
				</view>
			</view> -->
			<view class="stepsItem" v-if="info.status>=6">
				<view class="title">入合格品库</view>
				<view class="illlItem">
					<view class="label">喷漆照片：</view>
					<view class="listTitle">
						<view class="picList">
						<image :src="cdnUrl+it" mode="aspectFill"
							@tap="previewImg([info.penqiArr.penqiPic],0)" v-for="(it,idx) in info.penqiArr.penqiPic"
								:key="idx"></image>
						</view>
					</view>
				</view>
				<view class="time">{{info.penqiAt}}</view>
			</view>
			<view class="stepsItem" v-if="info.status>6">
				<view class="title">出库</view>
				<view class="time">{{info.chukuAt}}</view>
			</view>
			<view class="stepsItem" v-if="info.status>7">
				<view class="title">客户已确认收货</view>
				<view class="time">{{info.shouTrueAt}}</view>
				<view class="illlItem">
				<view class="label">客户签字：</view>
				<view class="listTitle">
				<image :src="cdnUrl+info.trueShou" @tap="previewImg([info.trueShou],0)"></image>
				</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import helper from '../../common/helper';
import listItem from '../../uni_modules/uview-plus/components/u-list-item/listItem';
	import api from '@/api.js'
	export default {
		mixins: [helper],
		data() {
			return {
				id: 0,
				info: {

				},
				typeList:[
					{
						name:"基础信息"
					},{
						name:"维修过程"
					},{
						name:"全部"
					}
				],
				currentIndex:0,
				
			}
		},
		onLoad(e) {
			this.id = e.id;
			api.doRequest('get', 'valve/detail', {
				id: this.id
			}).then(res => {
				if (res.statusCode == 200) {
					let ret = res.data.data;
					console.log(ret);
					this.info = ret;
					if(this.info.picJson){
						this.info.picArr=JSON.parse(this.info.picJson);
					}else{
						this.info.picArr=[];
					}
					if(this.info.videoJson){
						this.info.videoArr=JSON.parse(this.info.videoJson);
					}else{
						this.info.videoArr=[];
					}
					if(this.info.chaiJson){
						this.info.chaiArr=JSON.parse(this.info.chaiJson);
					}else{
						this.info.chaiArr=[];
					}
					if(this.info.xiuJson){
						this.info.xiuArr=JSON.parse(this.info.xiuJson);
					}else{
						this.info.xiuArr=[];
					}
					if(this.info.shiyaJson){
						this.info.shiyaArr=JSON.parse(this.info.shiyaJson);
					}else{
						this.info.shiyaArr={};
					}
					if(this.info.penqiJson){
						this.info.penqiArr=JSON.parse(this.info.penqiJson);
					}else{
						this.info.penqiArr={};
					}
				}
			})
		},
		methods: {
			changeType(e){
				this.currentIndex=e.index;
			},
			previewImg(list,index){
				let newList=[];
				list.forEach((item,index)=>{
					newList.push(this.cdnUrl+item);
				})
				
				uni.previewImage({
					urls:newList,
					current:index
				})
			}
		}
	}
</script>

<style>
.wq-table{
	width:calc(100% - 40upx);margin:10upx auto;border-collapse: collapse;text-align: center;border-radius:20upx;overflow: hidden;border-right:1upx solid #ccc
}
.thead{background:#004ea2;color:#fff;height:60upx;border-bottom:1upx solid #ccc; display: flex;align-items: center;justify-content: center;font-size:14px;}
.tbody .row{width:100%;display: flex;border-bottom:1upx solid #ccc;}
.wq-table .td,.wq-table .th{min-height:60upx;display: flex; align-items: center; justify-content: left; text-indent:2em;line-height:60upx;}
.wq-table .th{width:200upx !important;background:#004ea2;color:#fff;}
.wq-table .td{width:520upx;}
.wq-table .td image{width:150upx; height:150upx;margin:10upx;border-radius:10upx;}
.wq-table .td video{width:320upx; height:180upx;margin:10upx;border-radius:10upx;}
.wq-table .tbody {font-size:12px;}
.stepsItem{
	width:calc(100% - 80upx);
	height:auto;
	background:#eee;
	margin:20upx auto;
	border-radius:20upx;
	padding:20upx;
}
.stepsItem .title{
	color:#004ea2;
	font-weight: 600;
}
.flex-container{
	display: flex;
	flex-wrap: wrap;
}
.stepsItem .time{
	color:#666;
	font-size:12px;
	border:none !important;
}
.stepsItem .ilItem{
	width:calc(100% - 80upx);
	background:#fff;
	padding:20upx;
	margin:20upx auto;
	border-radius:20upx;
}
.stepsItem .ilItem .listTitle{
	
}
.picList{
	width:590upx;
	display: flex;
	flex-wrap: wrap;
	
}
.picList image{
	width:200upx;
	height:200upx;
	margin:10upx;
	border-radius:10upx;
}
.picList video{
		width:200upx;
		height:200upx;
	}
.illItem{
	width:630upx;
	display: flex;
	flex-direction: column;
}
.illItem .label{
	font-weight:600;
	line-height:60upx;
}
.illlItem{
	width:670upx;
	display: flex;
	flex-direction: column;
}
.illlItem .label{
	font-weight:600;
	line-height:60upx;
}
.illlItem image{
	width:320upx;height:180upx;
}
.illItem .price{
	color:#f00;
}
.mImg{width:320upx;height:180upx;}
.mVideo{width:320upx;height:180upx;}
</style>